<!-- @format -->

<template>
	<div id="prient-content">
		<div style="text-align: center; font-size: 28px;position: relative;">
			<div style="font-size: 14px;position: absolute;left:0px;top:50%;transform: translateY(-50%);">
				<a-select v-model="dept_id" :options="dept_list" :field-names="{ value: 'id', label: 'name' }" style="width: 200px;"
                    allow-clear allow-search placeholder="请选择装卸公司" />
			</div>
			<h2>{{props.title}}</h2>
			<div v-if="props.load_type == 1" style="font-size: 14px;position: absolute;right:0px;top:50%;transform: translateY(-50%);">订单编号：{{ props.data[0].order_no }}</div>
		</div>
		<div class="table-heade">
			<div class="p-2">时间：{{ timeFormat(new Date(), "yyyy/mm/dd") }}</div>
			<div class="p-2" v-if="props.load_type == 1"> 货主：{{ props.data[0].dept_name }}</div>
			<div class="p-2" v-else>本批次重点卸________车，装________车:</div>
		</div>
		<table
			border="1"
			cellspacing="10"
			cellpadding="20"
			border-collapse="collapse"
		>
		<tr>
				<td :colspan="columns.length + 1" class="text-left">
					1. 认真执行作业前后三检工作，严格执行“十不吊”。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					2. 注意吊装作业安全，按规定使用手钩，与吊物保持安全距离。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					3. 注意吊装座架与集装箱F-TR锁作业安全，严格执行集装箱F-TR锁作业标准。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					4. 注意圆形物资塞垫。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					5. 作业完毕后，装卸人员做好物尽场清；采取防风措施，插好地锚。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					6. 作业完毕后，装卸人员需认真检査和确认车辆状况，异常情况拍照留存反馈。
				</td>
			</tr>
			<tr>
				<td :colspan="columns.length + 1" class="text-left">
					7. 装卸车作业过程中发现短少、污染、破损等异常情况，需及时反馈并拍照留存。
				</td>
			</tr>
			<tr>
				<td>序号</td>
				<td v-for="(item, index) in columns" :key="index">
					{{ item.title }}
				</td>
			</tr>
			<tr v-for="(item, index) in props.data" :key="index">
				<td>
					{{ index + 1 }}
				</td>
				<td v-for="(it, i) in columns" :key="i">
					<template v-if="it.formType == 'input'">
						<a-input
							:placeholder="it.placeholder"
							v-model="item[it.dataIndex]"
							center
						></a-input>
					</template>
					<template v-else>
						{{ getValue(item, it) }}
					</template>
				</td>
			</tr>
			<tr v-if="props.t_drivers">
				<td>司机</td>
				<td colspan="9" class="text-wrap text-left p-l p-r">
					<!-- {{ props.t_drivers }} -->
					<div class='scrollable' style='width:100%;'>{{ props.t_drivers }}</div>
				</td>
			</tr>
		</table>
		<div class="border-bottom border-left border-right p-2 blank">
			调度：<span></span> 外勤：<span></span>装卸队长：<span></span>派工时间：{{
				timeFormat(new Date(), "hh时MM分")
			}}
		</div>
	</div>
</template>

<script setup>
	import { defineProps, defineEmits, ref, reactive, onMounted } from "vue";
	import timeFormat from "@/utils/timeFormat.js";
	import commonApi from "@/api/common";
	import { request } from "@/utils/request.js";
	const emit = defineEmits(["change"]);

	const props = defineProps({
		data: {
			type: Array,
			required: true,
		},
		columns: {
			type: Array,
			required: true,
		},
		title:{
			type: String,
			required: false,
		},
		load_type:{
			type: Number,
			required: false,
		},
		t_drivers:{
			type: String,
			required: false,
		}
	});
	const dept_list = ref([])
	const dept_id = ref('')
	onMounted(() => {
		request({
			url: 'system/dept/remote',
			method: 'post',
			data: {
			openPage: false,
			remoteOption: {
				filter: {
				type: ['=', 4],
				status: ['=',1]
				},
				select: ["id", "name"],
				sort: { id: "desc" }
			}
			}
		}).then(res => {
			dept_list.value = res.data
			dept_id.value = res.data[0].id
			
		})
	});

	// 页面关闭了
	const cancel = (e) => {
		emit("cancel");
	};

	// 更具每行绑定的key，找到对应的 value
	const getValue = (item, column) => {
		if (!column.dataIndex) return;
		let key = column.dataIndex.split(".");
		let value = "";
		for (let i = 0; i < key.length; i++) {
			if (value) {
				value = value[key[i]];
			} else {
				value = item[key[i]];
			}
		}
		if(value == null){
			value = '/'
		}
		return value || '/';
	};
</script>

<style lang="less" scoped>
	#prient-content {
		width: 100%;
		padding: 24px 36px;
		flex-grow: 1;

		.table-heade {
			display: flex;
			border: 1px solid #000;
			border-bottom: none;

			> div {
				width: 50%;
				box-sizing: border-box;
				&:nth-of-type(1) {
					border-right: 1px solid #000;
				}
			}
		}

		table {
			border-right: 1px solid #000;
			border-bottom: 1px solid #000;
			width: 100%;
			box-sizing: border-box;
			overflow: hidden auto;

			tr {
				width: 100%;
				overflow-x: hidden;
			}

			td {
				border-left: 1px solid #000;
				border-top: 1px solid #000;
				flex: 1 1 auto;
				text-align: center;
				// white-space: nowrap;
				padding: 0 2px;
				overflow-x: hidden;
				min-width: 30px;
				max-width: 150px;
			}
		}
	}

	.border-top {
		border-top: 1px solid #000;
	}

	.border-left {
		border-left: 1px solid #000;
	}

	.border-right {
		border-right: 1px solid #000;
	}

	.border-bottom {
		border-bottom: 1px solid #000;
	}

	.p-2 {
		padding: 2px;
	}

	.p-l {
		padding-left: 10px !important;
	}

	.p-r {
		padding-right: 10px !important;
	}

	.blank {
		span {
			width: 100px;
			height: 100%;
			display: inline-block;
		}
	}

	::v-deep .arco-input-wrapper {
		// padding: 0;
		background: transparent;
		border: none;
		text-align: center;
		.arco-input {
			text-align: center;
		}
	}

	.text-left {
		text-align: left !important;
	}
	.scrollable{
		scrollbar-width: none;
	}
	.scrollable::-webkit-scrollbar {
		display: none; /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
	}
</style>

<style>
	@media print {
		@page {
			size: auto;
		}
		body,
		html {
			height: auto !important;
			overflow: initial !important;
		}
	}
</style>
